<template>
  <div>
    <div class="header">
      <el-page-header @back="goBack" content="订单详情"> </el-page-header>
      <el-steps :space="200" :active="currentStatus" finish-status="success">
        <el-step title="提交订单"></el-step>
        <el-step title="支付订单"></el-step>
        <el-step title="待发货"></el-step>
        <el-step title="待收货"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
    </div>
    <div class="content">
      <div class="content-top">
        当前订单状态：{{ orderStatus[currentStatus] }}
      </div>
      <div class="content-baseMsg">
        <div>
          <el-table :data="orderInfo" border>
            <el-table-column prop="OrderNum" label="订单编号" width="180">
            </el-table-column>
            <el-table-column prop="consignee" label="收货人" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" width="180">
            </el-table-column>
            <el-table-column prop="createAt" label="提货日期" width="180">
            </el-table-column>
            <el-table-column prop="shoppingAdd" label="提货门店" width="180">
            </el-table-column>
          </el-table>
        </div>

        <div>
          <el-table
            :data="goodsInfo"
            border
            :summary-method="getSummaries"
            :span-method="arraySpanMethod"
          >
            <el-table-column
              table-column
              prop="gallery"
              label="商品图片"
              width="180"
            >
              <template slot-scope="scope">
                <div style="text-align: center">
                  <el-avatar
                    :size="60"
                    src="https://empty"
                    @error="errorHandler"
                  >
                    <img width="60" :src="scope.row.gallery" alt="" />
                  </el-avatar>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" width="180">
            </el-table-column>
            <el-table-column prop="originalPrice" label="原价" width="180">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="180">
            </el-table-column>
            <el-table-column prop="stock" label="数量" width="180">
            </el-table-column>
            <el-table-column prop="shoppingAdd" label="小计" width="180">
              <template slot-scope="scope">
                <div style="text-align: center">
                  {{ scope.row.price * scope.row.stock }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetDetailOrder } from "@/api/user";
export default {
  data() {
    return {
      orderInfo: [],
      goodsInfo: [],
      currentStatus: 1,
      orderStatus: ["待付款", "代收款", "待发货", "待收货", "已完成"],
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    errorHandler() {
      return true;
    },
  },
  created() {
    GetDetailOrder(this.$route.params.orderNum).then((res) => {
      console.log(res.data);
      this.orderInfo = res.data.data;
      this.goodsInfo = res.data.products;
      this.orderStatus.forEach((item, index) => {
        if (res.data.data[0].status == item) {
          this.currentStatus = index + 1;
        }
        if (/退/g.test(res.data.data[0].status)) {
          this.currentStatus = 1;
        }
      });
    });
  },
};
</script>

<style scoped>
.header {
  margin: auto;
}
</style>